<#import "../tpl/pageTep.ftl" as page>
<@page.pageBase currentMenu="产品管理">
<style>
    .button-large {
        font-size: 16px;
    }

    .webuploader-pick {
        background: none;
        padding: 0;
    }

    input.calendar {
        width: 160px;
    }
</style>
<div class="xm-product">
    <div class="row">
        <div class="panel">
            <div class="panel-header">
                <a href="${basepath}/rest/manage/product/toList">返回上一级</a>
            </div>
            <div class="panel-body">
                <form id="addForm" class="form-horizontal" action="${basepath}/rest/manage/product/updateJson"
                      method="post">
                    <input type="hidden" value="${e.id!}" name="id">
                    <div class="control-group">
                        <label class="control-label">
                            <s>*</s>
                            产品名称：
                        </label>
                        <div class="controls">
                            <input type="text" class="control-text span-width span8" value="${e.name!}" name="name" placeholder="请输入产品名称"
                                   data-rules="{required : true}">
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">
                            <s>*</s>
                            产品主图：
                        </label>
                        <div class="controls" style="overflow: hidden;height: auto;padding-bottom: 20px;">
                            <input type="hidden" class="input-normal control-text " name="headImage"
                                   data-rules="{required : true}" value="${e.headImage!}" readonly style="width: 280px;">
                            <img id="iconpic" src="/${e.headImage!}" style="width: 120px;height: 100px;">
                            <div class="pull-right">
                                <a id="icon" class="button button-min button-primary "
                                   style="height:20px;margin-left: 10px;">上传</a>
                                <div style="padding: 1rem ">推荐尺寸200*200</div>
                            </div>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">
                            <s>*</s>
                            选择分类：
                        </label>
                        <div class="controls">
                            <select name="categoryID" value="${e.categoryID!}" class="category select-box pull-left" data-rules="{required : true}">
                            </select>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">
                            <s>*</s>
                            产品简介：
                        </label>
                        <div class="controls  control-row-auto">
                            <textarea name="introduce"    class="control-row4 input-large" data-rules="{required : true}" placeholder="请输入内容">${e.introduce!}</textarea>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">
                            <s>*</s>
                            产品介绍：
                        </label>
                        <div class="controls control-row12" style="height: 350px;initialFrameWidth: 100%;">
                            <textarea type="text"  class="input-large ueditBox" name="content" id="power"
                                      data-rules="{required:true}">${e.content!}</textarea>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">
                            <s>*</s>
                            技术参数：
                        </label>

                        <div class="controls control-row12" style="height: 350px;initialFrameWidth: 100%;">
                            <textarea type="text"  class="input-large ueditBox" name="parameter" id="second"
                                      data-rules="{required:true}">${e.parameter!}</textarea>
                        </div>
                    </div>
                    <h3 class="offset2"> 产品图片
                        <a class="button button-primary pull-right" id="imagesBtn" style="height:20px">上传图片</a>
                    </h3>
                    <hr>
                    <input type="hidden" class="control-text span-width " value="${e.image!}" name="image" id="picture"
                           data-rules="{required:true}" data-messages="{required:'图片不能为空'}">
                    <div id="imagesGrid" class="xm-grid"></div>
                    <div class="centered">
                        <button type="submit" class="button  button-large  button-success">保存</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    var ue = UE.getEditor('power', {

        initialFrameWidth :800,
       initialFrameHeight:200,
    });
    var ue2 = UE.getEditor('second', {

        initialFrameWidth :800,
       initialFrameHeight:200,
    });
    var Grid = BUI.Grid;
    var Store = BUI.Data.Store;
    var addForm = new BUI.Form.Form({
        srcNode: '#addForm',
        submitType: 'ajax',
        callback: function (data) {
            if (data.success == true) {
                window.location.href = "${basepath}/rest/manage/product/toList"
            } else {
                BUI.Message.Alert(data.message, 'error');
                return;
            }
        }
    }).render();

    /*--------------------------活动图片列表  begin--------------------*/
    /**
     * 图片信息
     * @type {*[]}
     */
    var imagesColumns = [
        {title: '序号', elCls: 'center', width: '30%', renderer: function (value, data, index) {
                return (index + 1);}
        },
        {title: '图片', dataIndex: 'url', elCls: 'center', width: '30%', renderer: function (data) {
                return '<img src="${basepath}/' + data + '" width="100px" height="100px"/>'}
        },
        {title: '操作', dataIndex: 'title', elCls: 'center', width: '40%', renderer: function (data, obj, index) {
                return '<a href="javascript:delImages(' + index + ')">删除</a>';}
        }
    ];

    /**
     * 删除缓存图片信息
     * @param index
     */
    function delImages(index) {
        BUI.Message.Confirm('确认要删除吗？', function () {
            var record = imagesStore.findByIndex(index);
            imagesStore.remove(record);
            var imgStr = imagesStore.getResult();
            var imgArr = new Array();
            for (var i = 0; i < imgStr.length; i++) {
                imgArr[i] = imgStr[i].url
            }
            $("#picture").val(imgArr.join(","));
        }, 'question');
    }

    var imagesStore = new Store({});
    var imagesGrid = new Grid.Grid({
        render: '#imagesGrid',
        width: '100%',//如果表格使用百分比，这个属性一定要设置
        columns: imagesColumns,
        idField: 'title',
        store: imagesStore
    }).render();
    var uploader = WebUploader.create({
        auto: true,
        swf: '${staticpath}/ueditor/third-party/webuploader/Uploader.swf',
        server: '${basepath}/rest/manage/ued/config?action=uploadimage',
        pick: '#imagesBtn',//绑定事件
        resize: false,
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/gif,image/jpg,image/jpeg,image/bmp,image/png,'
        }
    });

    //上传成功后
    uploader.on('uploadSuccess', function (file, response) {
        uploader.removeFile(file);//删除缓存
        imagesStore.add(response);//给store赋值
        var imgStr = imagesStore.getResult();
        //将数据源store转化成字符串赋值给input
        var imgArr = new Array();               //图片保存到数组中
        for (var i = 0; i < imgStr.length; i++) {
            imgArr[i] = imgStr[i].url;
        }
        $("#picture").val(imgArr.join(","));
    });
    var backUploader = WebUploader.create({
        auto: true,
        swf: '${staticpath}/base/ueditor/third-party/webuploader/Uploader.swf',
        server: '${basepath}/rest/manage/ued/config?action=uploadimage',
        pick: '#icon',
        resize: false,
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/gif,image/jpg,image/jpeg,image/bmp,image/png,'
        }
    });
    //获取一张主图并传入url
    backUploader.on('uploadSuccess', function (file, response) {
        backUploader.removeFile(file);
        addForm.setFieldValue("headImage", response.url);
        $("#iconpic").attr("src", "${basepath}/" + response.url);
    });
    (function () {
        $.ajax({
            type:'GET',
            url:'/rest/manage/productcategory/selectAllList',
            dataType:'json',
            success:function (data) {
                var list=data.data,html='';
                $.each(list,function (i, e) {
                    html+='<option value="'+e.id+'">'+e.name+'</option>'
                });
                $('.category').append(html);
            }
        })
    })();
    $('.category').val('${e.categoryID!}');
    (function () {
        var imgArr = $("#picture").val().split(',');
        for (var i = 0; i < imgArr.length; i++) {
            var obj = new Object();
            obj.url = imgArr[i];
            obj.state = "SUCCESS";
            imagesStore.add(obj);
        }
    })();
</script>

</@page.pageBase>
